<script setup lang="ts">
import { ref, reactive, nextTick } from "vue";
import userStore from "@/store/user";
import Vcode from "vue3-puzzle-vcode";
import { ElMessage } from "element-plus";
import { userLoginService, getUserInfoByID } from "@/service/user";
import { useAddEvent, useRemoveEvent } from "@/hooks/usewindow";
const userStore_ = userStore();
const phoneRgx = /^1[3-9]{1}[0-9]{9}$/;
const emailRex = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
const emits = defineEmits(["cancelLogin"]);
const target = ref();
const isShow = ref(false);
const ruleFormRef = ref();
const accountInputRef = ref();
const accountText = ref();
const passwordText = ref();
const accountSuccess = ref(false);
const passwordSuccess = ref(false);

const onSuccess = async () => {
  passwordText.value = "";
  const res: any = await userLoginService(user);
  isShow.value = false;
  if (res.code === 0) {
    const userInfo: any = await getUserInfoByID(res.data.id);
    emits("cancelLogin");
    userStore_.userInfo = { ...res.data, ...userInfo.data };
    userStore_.isLogin = true;
    ElMessage({
      type: "success",
      message: "登录成功~"
    });
  } else {
    ElMessage({
      type: "error",
      message: res.data.msg
    });
  }
  document
    .querySelector("body")!
    .setAttribute("style", "overflow: auto !important;");
};
const showVode = (event: any) => {
  // 鼠标点击
  if (!event.key && passwordSuccess.value && accountSuccess.value) {
    isShow.value = true;
  }
  // 键盘按下 enter
  else if (
    event.key === "Enter" &&
    passwordSuccess.value &&
    accountSuccess.value
  ) {
    isShow.value = true;
  } else if (
    event.key === "Enter" &&
    (!passwordSuccess.value || !accountSuccess.value)
  ) {
    ElMessage({
      type: "warning",
      message: "请填写完登录内容~"
    });
  }
  console.log(
    event.key,
    passwordSuccess.value,
    accountSuccess.value,
    !passwordSuccess.value,
    !accountSuccess.value
  );
};
// 用户帐号密码
const user = reactive({
  account: "",
  password: ""
});
// 检查帐号修改
const accountChange = (value: string) => {
  if (!value) {
    accountText.value = "帐号不能为空";
    accountSuccess.value && (accountSuccess.value = false);
  } else if (value.indexOf("@") === -1) {
    if (!phoneRgx.test(value)) {
      accountText.value = `请输入正确的手机号码`;
      accountSuccess.value && (accountSuccess.value = false);
    } else {
      accountText.value = "";
      accountSuccess.value = true;
    }
  } else if (value.indexOf("@") !== -1) {
    if (!emailRex.test(value)) {
      accountText.value = "请输入正确的电子邮箱";
      accountSuccess.value && (accountSuccess.value = false);
    } else {
      accountText.value = "";
      accountSuccess.value = true;
    }
  }
};
// 检查密码修改
const passwordChange = (value: string) => {
  if (!value) {
    passwordText.value = "密码不能为空";
    passwordSuccess.value && (passwordSuccess.value = false);
  } else if (value.length < 6) {
    passwordText.value = "密码不能少于6位";
    passwordSuccess.value && (passwordSuccess.value = false);
  } else {
    passwordText.value = "";
    passwordSuccess.value = true;
  }
};
nextTick(() => {
  accountInputRef.value.focus();
  setTimeout(() => {
    (document.querySelector(".login-container") as Element).classList.add(
      "animation"
    );
  });
});
const cancelClick = () => {
  (document.querySelector(".login-container") as Element).classList.remove(
    "animation"
  );
  setTimeout(() => {
    emits("cancelLogin");
  }, 500);
};
useAddEvent("keydown", showVode);
useRemoveEvent("keydown", showVode);
</script>

<template>
  <Teleport to="#app">
    <div class="login-container" @click.self="cancelClick">
      <div class="login-box" ref="target">
        <h1 class="title">用户登录</h1>
        <el-form ref="ruleFormRef" :model="user">
          <el-form-item prop="account">
            <el-input
              ref="accountInputRef"
              @input="accountChange(user.account)"
              v-model="user.account"
              placeholder="手机号或邮箱"
            />
            <span class="error">{{ accountText }}</span>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              show-password
              type="password"
              @input="passwordChange(user.password)"
              v-model="user.password"
              placeholder="请输入密码"
            />
            <span class="error">{{ passwordText }}</span>
          </el-form-item>
        </el-form>
        <Vcode
          ref="target"
          :show="isShow"
          @success="onSuccess"
          @close="isShow = false"
        />

        <button @click="showVode" class="button">登录</button>
        <i class="tip"
          >登录既<span class="active">注册</span>~~ 注意 帐号和密码噢
          <a href="https://gitee.com/lysimportant" target="_blank"></a>
        </i>
      </div>
    </div>
  </Teleport>
</template>

<style scoped lang="less">
.title {
  font-size: 16px;
}
.active {
  font-size: 16px;
  padding: 0 2px;
}
.login-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.3);
  transition: all 0.3s linear;
  opacity: 0;

  .login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    padding: 10px 20px 25px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10 rgba(0, 0, 0, 0.5);
    .error {
      font-size: 12px;
      height: 12px;
      color: red;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-content: center;
    }
  }
  .tip {
    position: absolute;
    bottom: 10px;
    width: 100%;
    height: 10px;
    font-size: 12px;
    .img {
      display: inline-block;
      margin-left: 10px;
      width: 80px;
      vertical-align: middle;
    }
  }
}
.animation {
  // transform: scale(1) !important;
  opacity: 1;
}
</style>
